<template lang="html">
  <div class="modal" :class="myType">
    测试内容
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "red"
    }
  },
  data () {
    return {
      myType: this.type
    }
  },
  methods: {
    setType (type) {
      this.myType = type;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/default.scss";
.modal {
  width: 100%;
  color: $white;
  padding: 0.3rem 0;
  &.red {
    background-color: $red;
  }
  &.blue {
    background-color: $blue;
  }
}
</style>
